<template>
	<view class="add-address">
        <view class="list">
            <view class="item f-nw">
                <view class="item-title">手机号码</view>
                <view class="input-wrap">
                    <input  v-model="formData.phone" placeholder="手机号码" type="number"></input>
                </view>
            </view>
            <view class="item f-nw">
                <view class="item-title">验证码</view>
                <view class="input-wrap">
                    <input v-model="formData.sms_code" placeholder="验证码"></input>
                </view>
                <button type="primary" class="btn-code" @click="getCode">{{codeText}}</button>
            </view>
            <view class="operation f-c" @click="submit">登录 / 注册</view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
                    phone: '',
                    sms_code: '',
                    is_password: "2",
                    type: 2,
                },
                codeText: "发送验证码",
                isReady: true,
                timer: null,
			}
		},
		methods: {
			submit() {
                if (!this.checkPhone()) {
                    return;
                }
                if (this.formData.sms_code == "") {
                    uni.showToast({
                        icon: "none",
                        title: "请输入验证码"
                    })
                    return;
                }
                this.$api.login(this.formData).then(res=>{
                    uni.showToast({
                        icon: "none",
                        title: "登录成功"
                    })
                    uni.setStorageSync("userInfo",res.data)
                    setTimeout(()=>{
                        if (this.source) {
                            uni.redirectTo({
                                url: this.source
                            })
                            // location.reload()
                        } else {
                            uni.navigateBack()
                        }
                    },500)
                })
            },
            getCode() {
                if (this.isReady) {
                    if (!this.checkPhone()) {
                        return;
                    }
                    this.$api.getCode({phone: this.formData.phone,type: 2},{loading: true}).then(res=>{
                        uni.showToast({
                            title: "发送成功"
                        });
                        this.codeText = 60;
                        this.isReady = false;
                        this.timer = setInterval(()=>{
                            this.codeText -= 1;
                            if (this.codeText <= 0) {
                                this.isReady = true;
                                this.codeText = "发送验证码";
                                clearInterval(this.timer)
                            }
                        },1000)
                    })
                }
            },
            checkPhone() {
                if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.formData.phone)) {
                    uni.showToast({
                        icon: "none",
                        title: "请填写正确的手机号"
                    })
                    return false;
                }
                return true;
            }
		},
        onLoad({source}) {
            this.source = source;
        }
	}
</script>

<style>
    .btn-code {
        font-size: 12px;
        padding: 2 5px;
        background-color: #49e461;
    }
.item{
  padding: 15px 20rpx ;
  padding-left: 0;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #eee; 
}
.item-title{
  width: 140rpx
}
.input-wrap{
  flex-grow: 1
}
.operation{
  width: 702rpx;
  height: 80rpx;
  background-color: #49e461;
  color: #fff;
  margin: 0 auto;
  margin-top: 40rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
}
.del-operation{
  width: 702rpx;
  height: 80rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  border: 1rpx solid #eee;
  color: #333
}
</style>
